<template>
  <a-modal v-model:visible="visible" title="选择面试" @ok="handleOk" @cancel="handleCancel">
    <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="false" :scroll="{ y: '50vh' }" rowKey="id" size="small" @ok="handletableOk"> </a-table>
  </a-modal>
</template>
<script lang="ts">
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import { defineComponent, onUpdated, ref, Ref } from 'vue'
import { get } from '../../utils/request/request'

interface DataType {
  id: number
  title: string
  status: number
  create_by: string
}

interface SelectType {
  id: number
  title: string
  status: number
  create_by: string
}

const chosRecord = ref()

const useTabelEffect = (token: string) => {
  const columns = [
    { title: '面试标题', dataIndex: 'title', align: 'center' },
    { title: '状态', dataIndex: 'status', align: 'center' },
    { title: '创建人', dataIndex: 'create_by', align: 'center' }
  ]
  let data: Ref<DataType[]> = ref([])

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRows: DataType[]) => {
      console.log('selectedRows: ', selectedRows[0])
    },
    onSelect: (record: SelectType) => {
      chosRecord.value = record
    }
  }
  const getData = async () => {
    const res: any = await get('/admin/api/v1/recruitment/interview/list?page=1&limit=1000', token)
    if (!res.data) {
      message.warn('没有面试数据')
    } else {
      const modifiedData = res.data
      modifiedData.forEach((interview: any) => {
        if (interview.status === 0) {
          interview.status = '未开始'
        } else if (interview.status === 1) {
          interview.status = '进行中'
        } else {
          interview.status = '已结束'
        }
      })
      data.value = modifiedData
    }
  }
  return {
    data,
    columns,
    rowSelection,
    getData
  }
}

const useModalEffect = (chosTitle: string, emit: any) => {
  const visible = ref<boolean>(false)
  const showModal = () => {
    visible.value = true
  }
  const handleOk = () => {
    visible.value = false
    emit('chosTitle', chosRecord.value)
  }
  const handleCancel = () => {
    if (chosTitle == '') {
      emit('chosTitle', {
        id: undefined,
        title: ''
      })
    }
  }
  return {
    visible,
    showModal,
    handleOk,
    handleCancel
  }
}

export default defineComponent({
  emits: ['chosTitle'],
  props: ['chosTitle'],
  setup(props, { emit }) {
    const handletableOk = () => {
      console.log('handleOk')
    }
    const token: string = localStorage.getItem('token') as string
    const { visible, showModal, handleOk, handleCancel } = useModalEffect(props.chosTitle, emit)
    const { data, columns, rowSelection, getData } = useTabelEffect(token)
    onUpdated(() => {
      if (visible.value) {
        getData()
        console.log('getData')
      }
    })
    return {
      visible,
      showModal,
      handletableOk,
      handleOk,
      handleCancel,
      data,
      columns,
      rowSelection
    }
  }
})
</script>
